<template>
  <section 
    id="contact" 
    class="py-24 md:py-32 transition-all duration-300"
    :class="backgroundType === 'gradient' ? 'bg-gradient-to-br' : ''"
    :style="getBackgroundStyles()"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 -->
      <div class="text-center max-w-3xl mx-auto mb-16 md:mb-20">
        <span 
          class="font-medium inline-block mb-2"
          :style="{ color: primaryColor }"
        >
          {{ subtitle }}
        </span>
        <h2 
          class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mb-4"
          :style="{ color: titleColor }"
        >
          {{ title }}
        </h2>
        <p 
          class="text-lg text-gray-600 leading-relaxed"
          :style="{ color: descriptionColor }"
        >
          {{ description }}
        </p>
      </div>
      
      <!-- 主要内容区 -->
      <div class="flex flex-col lg:flex-row gap-12">
        <!-- 加载状态 -->
        <div v-if="isLoading" class="w-full flex flex-col items-center justify-center py-20">
          <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4" :style="{ borderColor: primaryColor }"></div>
          <p class="mt-4 text-lg" :style="{ color: descriptionColor }">正在加载联系表单数据...</p>
        </div>
        
        <!-- 联系表单和信息 -->
        <div v-else class="flex flex-col lg:flex-row gap-12">
          <!-- 联系表单 -->
          <div class="w-full lg:w-1/2">
            <div 
              class="p-8 rounded-xl relative"
              :style="{
                backgroundColor: cardBgColor,
                borderRadius: `${cardRadius}px`,
                boxShadow: cardShadow
              }"
            >","},{
            <h3 
              class="text-2xl font-bold mb-6 text-gray-800"
              :style="{ color: formTitleColor }"
            >
              {{ formTitle }}
            </h3>
            <form @submit.prevent="handleSubmit">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label 
                    :for="`name-${id}`" 
                    class="block mb-2 text-sm font-medium"
                    :style="{ color: labelColor }"
                  >
                    {{ formFields.name.label }}
                    <span v-if="formFields.name.required" class="text-red-500">*</span>
                  </label>
                  <input 
                    type="text" 
                    :id="`name-${id}`" 
                    v-model="formData.name"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300"
                    :style="{ '--tw-ring-color': `${primaryColor}80`, '--tw-border-color': primaryColor }"
                    :placeholder="formFields.name.placeholder"
                    :required="formFields.name.required"
                  >
                </div>
                <div>
                  <label 
                    :for="`email-${id}`" 
                    class="block mb-2 text-sm font-medium"
                    :style="{ color: labelColor }"
                  >
                    {{ formFields.email.label }}
                    <span v-if="formFields.email.required" class="text-red-500">*</span>
                  </label>
                  <input 
                    type="email" 
                    :id="`email-${id}`" 
                    v-model="formData.email"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300"
                    :style="{ '--tw-ring-color': `${primaryColor}80`, '--tw-border-color': primaryColor }"
                    :placeholder="formFields.email.placeholder"
                    :required="formFields.email.required"
                  >
                </div>
              </div>
              
              <div class="mb-6" v-if="showCompanyField">
                <label 
                  :for="`company-${id}`" 
                  class="block mb-2 text-sm font-medium"
                  :style="{ color: labelColor }"
                >
                  {{ formFields.company.label }}
                </label>
                <input 
                  type="text" 
                  :id="`company-${id}`" 
                  v-model="formData.company"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300"
                  :style="{ '--tw-ring-color': `${primaryColor}80`, '--tw-border-color': primaryColor }"
                  :placeholder="formFields.company.placeholder"
                >
              </div>
              
              <div class="mb-6" v-if="showSubjectField">
                <label 
                  :for="`subject-${id}`" 
                  class="block mb-2 text-sm font-medium"
                  :style="{ color: labelColor }"
                >
                  {{ formFields.subject.label }}
                  <span v-if="formFields.subject.required" class="text-red-500">*</span>
                </label>
                <select 
                  :id="`subject-${id}`" 
                  v-model="formData.subject"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300"
                  :style="{ '--tw-ring-color': `${primaryColor}80`, '--tw-border-color': primaryColor }"
                  :required="formFields.subject.required"
                >
                  <option value="">请选择</option>
                  <option 
                    v-for="(option, index) in subjectOptions" 
                    :key="index" 
                    :value="option.value"
                  >
                    {{ option.label }}
                  </option>
                </select>
              </div>
              
              <div class="mb-6">
                <label 
                  :for="`message-${id}`" 
                  class="block mb-2 text-sm font-medium"
                  :style="{ color: labelColor }"
                >
                  {{ formFields.message.label }}
                  <span v-if="formFields.message.required" class="text-red-500">*</span>
                </label>
                <textarea 
                  :id="`message-${id}`" 
                  rows="5" 
                  v-model="formData.message"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300 resize-none"
                  :style="{ '--tw-ring-color': `${primaryColor}80`, '--tw-border-color': primaryColor }"
                  :placeholder="formFields.message.placeholder"
                  :required="formFields.message.required"
                ></textarea>
              </div>
              
              <button 
                type="submit" 
                class="w-full md:w-auto px-8 py-3 rounded-lg font-medium transition-all duration-300 flex items-center justify-center hover:opacity-90"
                :style="getSubmitButtonStyles()"
                :disabled="isSubmitting"
              >
                <span v-if="!isSubmitting">{{ submitButtonText }}</span>
                <span v-if="isSubmitting" class="flex items-center">
                  <i class="fa fa-spinner fa-spin mr-2"></i>
                  发送中...
                </span>
              </button>
            </form>
          </div>
        </div>
        
        <!-- 联系信息 -->
        <div class="w-full lg:w-1/2">
          <!-- 联系方式 -->
          <div 
            class="p-8 mb-8"
            :style="{
              backgroundColor: cardBgColor,
              borderRadius: `${cardRadius}px`,
              boxShadow: cardShadow
            }"
          >
            <h3 
              class="text-2xl font-bold mb-6"
              :style="{ color: infoTitleColor }"
            >
              {{ contactInfoTitle }}
            </h3>
            <div class="space-y-6">
              <div 
                class="flex items-start"
                v-for="(citem, index) in contactInfoItems" 
                :key="index"
              >
              <div v-if="citem && citem.visible"> 
              
                <div 
                  class="w-12 h-12 rounded-full flex items-center justify-center mr-4 mt-1 flex-shrink-0"
                  :style="{ 
                    backgroundColor: `${primaryColor}10`,
                    color: primaryColor
                  }"
                >
                  <i class="fa" :class="citem.icon"></i>
                </div>
                <div>
                  <h4 
                    class="font-bold mb-1 text-gray-800"
                    :style="{ color: infoLabelColor }"
                  >
                    {{ citem.title }}
                  </h4>
                  <p 
                    class="text-gray-700"
                    :style="{ color: infoValueColor }"
                  >
                    <span v-for="(line, i) in citem.content" :key="i">
                      <span v-if="i > 0"><br></span>
                      <a 
                        v-if="citem.linkable && line.link" 
                        :href="line.link" 
                        :target="line.target || '_self'"
                        :style="{ color: infoValueColor, textDecoration: 'underline' }"
                        class="hover:opacity-80 transition-opacity"
                        @click.prevent="handleContactLinkClick(line.link, citem.title)"
                      >
                        {{ line.text }}
                      </a>
                      <span v-else>{{ line.text }}</span>
                    </span>
                  </p>
                </div>
              </div>
              </div>
            </div>
          </div>
          
          <!-- 社交媒体和订阅 -->
          <div 
            class="p-8"
            :style="{
              backgroundColor: cardBgColor,
              borderRadius: `${cardRadius}px`,
              boxShadow: cardShadow
            }"
          >
            <h3 
                class="text-2xl font-bold mb-6 text-gray-800"
                :style="{ color: socialTitleColor }"
              >
                {{ socialTitle }}
              </h3>
              <p 
                class="text-gray-700 mb-6"
                :style="{ color: socialDescriptionColor }"
              >
                {{ socialDescription }}
              </p>
              
              <!-- 社交媒体图标 -->
              <div class="flex flex-wrap gap-4 mb-8">
                <a 
                  v-for="(social, index) in socialLinks" 
                  :key="index"
                  :href="social.link"
                  class="w-12 h-12 rounded-full flex items-center justify-center transition-all duration-300 hover:translate-y-[-2px] hover:shadow-md"
                  :style="{ 
                    backgroundColor: `${primaryColor}10`,
                    color: primaryColor
                  }"
                  :title="social.name"
                  @click.prevent="handleSocialLinkClick(social)"
                >
                  <i class="fa text-xl" :class="social.icon"></i>
                </a>
              </div>
              
              <!-- 订阅区域 -->
              <div v-if="showSubscription">
                <h4 
                  class="font-bold mb-4 text-gray-800"
                >
                  {{ subscribeTitle }}
                </h4>
                <div class="flex flex-col sm:flex-row gap-2">
                  <input 
                    type="email" 
                    v-model="subscriptionEmail"
                    class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300"
                    :style="{ '--tw-ring-color': `${primaryColor}80`, '--tw-border-color': primaryColor }"
                    :placeholder="subscribePlaceholder"
                  >
                  <button 
                    class="px-4 py-2 rounded-lg font-medium transition-all duration-300 whitespace-nowrap hover:opacity-90"
                    :style="getSubscribeButtonStyles()"
                    @click="handleSubscribe"
                    :disabled="isSubscribing"
                  >
                    <span v-if="!isSubscribing">{{ subscribeButtonText }}</span>
                    <span v-if="isSubscribing">
                      <i class="fa fa-spinner fa-spin mr-1"></i>
                      订阅中
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 刷新按钮 -->
        <div v-if="!isLoading && dataSourceType !== 'static'" class="fixed bottom-6 right-6">
          <button 
            class="w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 hover:scale-105"
            :style="{
              backgroundColor: primaryColor,
              color: '#ffffff'
            }"
            @click="refresh"
            title="刷新联系表单数据"
          >
            <i class="fa fa-refresh"></i>
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ContactSection',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'contact-section',
      displayName: '联系我们模块',
      description: '包含联系表单、联系方式和社交媒体链接的模块',
      icon: 'fa-address-card',
      category: '交互组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '数据源配置',
        fields: [
          {
            name: 'dataSourceType',
            label: '数据源类型',
            type: 'select',
            options: [
              { label: '静态数据', value: 'static' },
              { label: 'API', value: 'api' },
              { label: '自定义', value: 'custom' }
            ],
            defaultValue: 'static'
          },
          {
            name: 'dataSourceUrl',
            label: '数据源URL',
            type: 'text',
            description: 'API地址',
            defaultValue: '',
            show: { name: 'dataSourceType', value: 'api' }
          },
          {
            name: 'autoLoad',
            label: '自动加载',
            type: 'boolean',
            defaultValue: true,
            description: '切换数据源类型时自动加载数据'
          }
        ]
      },
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'title',
            label: '主标题',
            type: 'text',
            defaultValue: '与我们取得联系'
          },
          {
            name: 'subtitle',
            label: '副标题',
            type: 'text',
            defaultValue: '联系我们'
          },
          {
            name: 'description',
            label: '描述文本',
            type: 'textarea',
            defaultValue: '无论您有任何疑问或需求，我们的团队都将竭诚为您提供专业的服务和支持'
          }
        ]
      },
      {
        title: '样式配置',
        fields: [
          {
            name: 'backgroundType',
            label: '背景类型',
            type: 'select',
            options: [
              { label: '纯色', value: 'solid' },
              { label: '渐变色', value: 'gradient' }
            ],
            defaultValue: 'gradient'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#ffffff'
          },
          {
            name: 'bgColor2',
            label: '渐变背景色2',
            type: 'color',
            defaultValue: '#f0f7ff'
          },
          {
            name: 'titleColor',
            label: '主标题颜色',
            type: 'color',
            defaultValue: '#1f2937'
          },
          {
            name: 'descriptionColor',
            label: '描述文本颜色',
            type: 'color',
            defaultValue: 'rgba(31, 41, 55, 0.7)'
          },
          {
            name: 'cardBgColor',
            label: '卡片背景色',
            type: 'color',
            defaultValue: '#ffffff'
          },
          {
            name: 'cardRadius',
            label: '卡片圆角(px)',
            type: 'number',
            min: 0,
            max: 30,
            defaultValue: 12
          },
          {
            name: 'cardShadow',
            label: '卡片阴影',
            type: 'text',
            defaultValue: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
          }
        ]
      },
      {
        title: '表单配置',
        fields: [
          {
            name: 'formTitle',
            label: '表单标题',
            type: 'text',
            defaultValue: '发送消息'
          },
          {
            name: 'formTitleColor',
            label: '表单标题颜色',
            type: 'color',
            defaultValue: '#1f2937'
          },
          {
            name: 'labelColor',
            label: '表单标签颜色',
            type: 'color',
            defaultValue: 'rgba(31, 41, 55, 0.8)'
          },
          {
            name: 'showCompanyField',
            label: '显示公司名称字段',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'showSubjectField',
            label: '显示咨询主题字段',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'subjectOptions',
            label: '咨询主题选项',
            type: 'array',
            defaultValue: [
              { label: '服务咨询', value: 'service' },
              { label: '产品咨询', value: 'product' },
              { label: '合作洽谈', value: 'cooperation' },
              { label: '其他问题', value: 'other' }
            ]
          },
          {
            name: 'submitButtonText',
            label: '提交按钮文本',
            type: 'text',
            defaultValue: '发送消息'
          },
          {
            name: 'formFields',
            label: '表单字段配置',
            type: 'object',
            properties: [
              { 
                name: 'name', 
                label: '姓名字段', 
                type: 'object',
                properties: [
                  { name: 'label', type: 'text', defaultValue: '姓名' },
                  { name: 'placeholder', type: 'text', defaultValue: '您的姓名' },
                  { name: 'required', type: 'boolean', defaultValue: true }
                ]
              },
              { 
                name: 'email', 
                label: '邮箱字段', 
                type: 'object',
                properties: [
                  { name: 'label', type: 'text', defaultValue: '邮箱' },
                  { name: 'placeholder', type: 'text', defaultValue: '您的邮箱' },
                  { name: 'required', type: 'boolean', defaultValue: true }
                ]
              },
              { 
                name: 'company', 
                label: '公司字段', 
                type: 'object',
                properties: [
                  { name: 'label', type: 'text', defaultValue: '公司名称' },
                  { name: 'placeholder', type: 'text', defaultValue: '您的公司名称' }
                ]
              },
              { 
                name: 'subject', 
                label: '主题字段', 
                type: 'object',
                properties: [
                  { name: 'label', type: 'text', defaultValue: '主题' },
                  { name: 'required', type: 'boolean', defaultValue: true }
                ]
              },
              { 
                name: 'message', 
                label: '消息字段', 
                type: 'object',
                properties: [
                  { name: 'label', type: 'text', defaultValue: '消息内容' },
                  { name: 'placeholder', type: 'text', defaultValue: '请输入您的消息内容' },
                  { name: 'required', type: 'boolean', defaultValue: true }
                ]
              }
            ]
          },
          {
            name: 'formEndpoint',
            label: '表单提交接口',
            type: 'text',
            defaultValue: '/api/contact'
          }
        ]
      },
      {
        title: '联系信息配置',
        fields: [
          {
            name: 'contactInfoTitle',
            label: '联系信息标题',
            type: 'text',
            defaultValue: '联系方式'
          },
          {
            name: 'infoTitleColor',
            label: '信息标题颜色',
            type: 'color',
            defaultValue: '#1f2937'
          },
          {
            name: 'infoLabelColor',
            label: '信息标签颜色',
            type: 'color',
            defaultValue: '#1f2937'
          },
          {
            name: 'infoValueColor',
            label: '信息值颜色',
            type: 'color',
            defaultValue: 'rgba(31, 41, 55, 0.7)'
          },
          {
            name: 'contactInfoItems',
            label: '联系信息项',
            type: 'array',
            defaultValue: [
              {
                title: '公司地址',
                icon: 'fa-map-marker',
                visible: true,
                linkable: false,
                content: [
                  { text: '北京市朝阳区科技园区88号智联大厦15层' }
                ]
              },
              {
                title: '联系电话',
                icon: 'fa-phone',
                visible: true,
                linkable: true,
                content: [
                  { text: '400-888-9999', link: 'tel:4008889999' },
                  { text: '010-88887777', link: 'tel:01088887777' }
                ]
              },
              {
                title: '电子邮箱',
                icon: 'fa-envelope',
                visible: true,
                linkable: true,
                content: [
                  { text: 'info@zhilian-tech.com', link: 'mailto:info@zhilian-tech.com' },
                  { text: 'support@zhilian-tech.com', link: 'mailto:support@zhilian-tech.com' }
                ]
              },
              {
                title: '工作时间',
                icon: 'fa-clock-o',
                visible: true,
                linkable: false,
                content: [
                  { text: '周一至周五: 9:00 - 18:00' },
                  { text: '周六至周日: 休息' }
                ]
              }
            ]
          }
        ]
      },
      {
        title: '社交媒体配置',
        fields: [
          {
            name: 'socialTitle',
            label: '社交媒体标题',
            type: 'text',
            defaultValue: '关注我们'
          },
          {
            name: 'socialDescription',
            label: '社交媒体描述',
            type: 'text',
            defaultValue: '关注我们的社交媒体账号，获取最新资讯和动态'
          },
          {
            name: 'socialTitleColor',
            label: '社交媒体标题颜色',
            type: 'color',
            defaultValue: '#1f2937'
          },
          {
            name: 'socialDescriptionColor',
            label: '社交媒体描述颜色',
            type: 'color',
            defaultValue: 'rgba(31, 41, 55, 0.7)'
          },
          {
            name: 'socialLinks',
            label: '社交媒体链接',
            type: 'array',
            defaultValue: [
              { name: '微信', icon: 'fa-weixin', link: '#' },
              { name: '微博', icon: 'fa-weibo', link: '#' },
              { name: 'LinkedIn', icon: 'fa-linkedin', link: '#' },
              { name: 'YouTube', icon: 'fa-youtube-play', link: '#' }
            ]
          },
          {
            name: 'showSubscription',
            label: '显示订阅区域',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'subscribeTitle',
            label: '订阅标题',
            type: 'text',
            defaultValue: '订阅我们的资讯'
          },
          {
            name: 'subscribePlaceholder',
            label: '订阅输入框提示',
            type: 'text',
            defaultValue: '您的邮箱地址'
          },
          {
            name: 'subscribeButtonText',
            label: '订阅按钮文本',
            type: 'text',
            defaultValue: '订阅'
          },
          {
            name: 'subscribeEndpoint',
            label: '订阅接口',
            type: 'text',
            defaultValue: '/api/subscribe'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'customDataRequest',
        label: '自定义数据请求',
        description: '当数据源类型为自定义时触发，用于父组件提供数据',
        parameters: []
      },
      {
        name: 'dataLoaded',
        label: '数据加载成功',
        description: '当从数据源加载数据成功时触发',
        parameters: [
          { name: 'sourceType', type: 'string', description: '数据源类型' },
          { name: 'data', type: 'object', description: '加载的数据' }
        ]
      },
      {
        name: 'dataLoadError',
        label: '数据加载失败',
        description: '当从数据源加载数据失败时触发',
        parameters: [
          { name: 'error', type: 'string', description: '错误信息' },
          { name: 'sourceType', type: 'string', description: '数据源类型' }
        ]
      },
      {
        name: 'formSubmit',
        label: '表单提交',
        description: '当联系表单提交时触发',
        parameters: [
          { name: 'data', type: 'object', description: '表单数据' },
          { name: 'timestamp', type: 'number', description: '提交时间戳' }
        ]
      },
      {
        name: 'formSuccess',
        label: '表单提交成功',
        description: '当联系表单提交成功时触发',
        parameters: [
          { name: 'response', type: 'object', description: '服务器响应' },
          { name: 'data', type: 'object', description: '提交的表单数据' }
        ]
      },
      {
        name: 'formError',
        label: '表单提交错误',
        description: '当联系表单提交失败时触发',
        parameters: [
          { name: 'error', type: 'object', description: '错误信息' },
          { name: 'data', type: 'object', description: '提交的表单数据' }
        ]
      },
      {
        name: 'socialLinkClick',
        label: '社交媒体链接点击',
        description: '当点击社交媒体链接时触发',
        parameters: [
          { name: 'social', type: 'object', description: '社交媒体信息' }
        ]
      },
      {
        name: 'contactLinkClick',
        label: '联系链接点击',
        description: '当点击联系信息中的链接时触发',
        parameters: [
          { name: 'link', type: 'string', description: '链接地址' },
          { name: 'type', type: 'string', description: '联系类型' }
        ]
      },
      {
        name: 'subscribe',
        label: '订阅提交',
        description: '当订阅表单提交时触发',
        parameters: [
          { name: 'email', type: 'string', description: '订阅邮箱' }
        ]
      },
      {
        name: 'subscribeSuccess',
        label: '订阅成功',
        description: '当订阅成功时触发',
        parameters: [
          { name: 'response', type: 'object', description: '服务器响应' },
          { name: 'email', type: 'string', description: '订阅邮箱' }
        ]
      },
      {
        name: 'subscribeError',
        label: '订阅错误',
        description: '当订阅失败时触发',
        parameters: [
          { name: 'error', type: 'object', description: '错误信息' },
          { name: 'email', type: 'string', description: '订阅邮箱' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'resetForm',
        label: '重置表单',
        description: '清空联系表单内容'
      },
      {
        name: 'setFormData',
        label: '设置表单数据',
        description: '设置联系表单字段值',
        parameters: [
          { name: 'data', type: 'object', required: true, description: '表单数据对象' }
        ]
      },
      {
        name: 'submitForm',
        label: '提交表单',
        description: '手动触发表单提交'
      },
      {
        name: 'setSubscriptionEmail',
        label: '设置订阅邮箱',
        description: '设置订阅输入框的邮箱地址',
        parameters: [
          { name: 'email', type: 'string', required: true, description: '邮箱地址' }
        ]
      }
    ]
  },
  
  props: {
    // 基本配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    title: {
      type: String,
      default: '与我们取得联系'
    },
    subtitle: {
      type: String,
      default: '联系我们'
    },
    description: {
      type: String,
      default: '无论您有任何疑问或需求，我们的团队都将竭诚为您提供专业的服务和支持'
    },
    
    children: {
      type: Array,
      default: () => []
    },
    // 样式配置
    backgroundType: {
      type: String,
      default: 'gradient',
      validator: (value) => ['solid', 'gradient'].includes(value)
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    bgColor2: {
      type: String,
      default: '#f0f7ff'
    },
    titleColor: {
      type: String,
      default: '#1f2937'
    },
    descriptionColor: {
      type: String,
      default: 'rgba(31, 41, 55, 0.7)'
    },
    cardBgColor: {
      type: String,
      default: '#ffffff'
    },
    cardRadius: {
      type: Number,
      default: 12,
      validator: (value) => value >= 0 && value <= 30
    },
    cardShadow: {
      type: String,
      default: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
    },
    
    // 表单配置
    formTitle: {
      type: String,
      default: '发送消息'
    },
    formTitleColor: {
      type: String,
      default: '#1f2937'
    },
    labelColor: {
      type: String,
      default: 'rgba(31, 41, 55, 0.8)'
    },
    showCompanyField: {
      type: Boolean,
      default: true
    },
    showSubjectField: {
      type: Boolean,
      default: true
    },
    subjectOptions: {
      type: Array,
      default: () => [
        { label: '服务咨询', value: 'service' },
        { label: '产品咨询', value: 'product' },
        { label: '合作洽谈', value: 'cooperation' },
        { label: '其他问题', value: 'other' }
      ]
    },
    submitButtonText: {
      type: String,
      default: '发送消息'
    },
    formFields: {
      type: Object,
      default: () => ({
        name: {
          label: '姓名',
          placeholder: '您的姓名',
          required: true
        },
        email: {
          label: '邮箱',
          placeholder: '您的邮箱',
          required: true
        },
        company: {
          label: '公司名称',
          placeholder: '您的公司名称'
        },
        subject: {
          label: '主题',
          required: true
        },
        message: {
          label: '消息内容',
          placeholder: '请输入您的消息内容',
          required: true
        }
      })
    },
    formEndpoint: {
      type: String,
      default: '/api/contact'
    },
    
    // 联系信息配置
    contactInfoTitle: {
      type: String,
      default: '联系方式'
    },
    infoTitleColor: {
      type: String,
      default: '#1f2937'
    },
    infoLabelColor: {
      type: String,
      default: '#1f2937'
    },
    infoValueColor: {
      type: String,
      default: 'rgba(31, 41, 55, 0.7)'
    },
    contactInfoItems: {
      type: Array,
      default: () => [
        {
          title: '公司地址',
          icon: 'fa-map-marker',
          visible: true,
          linkable: false,
          content: [
            { text: '北京市朝阳区科技园区88号智联大厦15层' }
          ]
        },
        {
          title: '联系电话',
          icon: 'fa-phone',
          visible: true,
          linkable: true,
          content: [
            { text: '400-888-9999', link: 'tel:4008889999' },
            { text: '010-88887777', link: 'tel:01088887777' }
          ]
        },
        {
          title: '电子邮箱',
          icon: 'fa-envelope',
          visible: true,
          linkable: true,
          content: [
            { text: 'info@zhilian-tech.com', link: 'mailto:info@zhilian-tech.com' },
            { text: 'support@zhilian-tech.com', link: 'mailto:support@zhilian-tech.com' }
          ]
        },
        {
          title: '工作时间',
          icon: 'fa-clock-o',
          visible: true,
          linkable: false,
          content: [
            { text: '周一至周五: 9:00 - 18:00' },
            { text: '周六至周日: 休息' }
          ]
        }
      ]
    },
    
    // 社交媒体配置
    socialTitle: {
      type: String,
      default: '关注我们'
    },
    socialDescription: {
      type: String,
      default: '关注我们的社交媒体账号，获取最新资讯和动态'
    },
    socialTitleColor: {
      type: String,
      default: '#1f2937'
    },
    socialDescriptionColor: {
      type: String,
      default: 'rgba(31, 41, 55, 0.7)'
    },
    socialLinks: {
      type: Array,
      default: () => [
        { name: '微信', icon: 'fa-weixin', link: '#' },
        { name: '微博', icon: 'fa-weibo', link: '#' },
        { name: 'LinkedIn', icon: 'fa-linkedin', link: '#' },
        { name: 'YouTube', icon: 'fa-youtube-play', link: '#' }
      ]
    },
    showSubscription: {
      type: Boolean,
      default: true
    },
    subscribeTitle: {
      type: String,
      default: '订阅我们的资讯'
    },
    subscribePlaceholder: {
      type: String,
      default: '您的邮箱地址'
    },
    subscribeButtonText: {
      type: String,
      default: '订阅'
    },
    subscribeEndpoint: {
      type: String,
      default: '/api/subscribe'
    },
    // 数据源配置
    dataSourceType: {
      type: String,
      default: 'static',
      validator: (value) => ['static', 'api', 'custom'].includes(value)
    },
    dataSourceUrl: {
      type: String,
      default: ''
    },
    autoLoad: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      // 表单数据
      formData: {
        name: '',
        email: '',
        company: '',
        subject: '',
        message: ''
      },
      // 订阅邮箱
      subscriptionEmail: '',
      // 提交状态
      isSubmitting: false,
      isSubscribing: false,
      // 加载状态
      isLoading: false,
      // 原始数据备份
      originalFormFields: null,
      originalContactInfoItems: null,
      originalSocialLinks: null,
      originalSubscribeConfig: null,
      // 唯一ID，用于表单字段ID避免冲突
      id: Math.random().toString(36).substring(2, 10)
    };
  },
  
  mounted() {
    // 保存原始数据
    this.originalFormFields = JSON.parse(JSON.stringify(this.formFields));
    this.originalContactInfoItems = JSON.parse(JSON.stringify(this.contactInfoItems));
    this.originalSocialLinks = JSON.parse(JSON.stringify(this.socialLinksConfig));
    this.originalSubscribeConfig = JSON.parse(JSON.stringify(this.subscribeConfig));
    
    // 自动加载数据
    if (this.autoLoad && this.dataSourceType !== 'static') {
      this.loadDataFromSource();
    }
  },
  
  watch: {
    // 监听数据源变化
    dataSourceType(newType, oldType) {
      if (newType !== oldType && newType !== 'static' && this.autoLoad) {
        this.loadDataFromSource();
      } else if (newType === 'static') {
        this.restoreOriginalData();
      }
    },
    
    // 监听数据源URL变化
    dataSourceUrl(newUrl, oldUrl) {
      if (newUrl !== oldUrl && this.dataSourceType !== 'static' && this.autoLoad) {
        this.loadDataFromSource();
      }
    }
  },
  
  methods: {
    /**
     * 从数据源加载数据
     */
    async loadDataFromSource() {
      if (this.dataSourceType === 'static') {
        return;
      }
      
      this.isLoading = true;
      
      try {
        if (this.dataSourceType === 'api' && this.dataSourceUrl) {
          // 验证URL
          if (!this.isValidUrl(this.dataSourceUrl)) {
            throw new Error('无效的数据源URL');
          }
          
          // 模拟API请求
          // 实际项目中应使用axios等库发送请求
          await new Promise(resolve => setTimeout(resolve, 1500));
          
          // 模拟响应数据
          const mockResponse = {
            formFields: [
              { id: 'name', label: '姓名', placeholder: '请输入您的姓名', required: true },
              { id: 'email', label: '邮箱', placeholder: '请输入您的邮箱', required: true, type: 'email' },
              { id: 'phone', label: '电话', placeholder: '请输入您的电话', required: false, type: 'tel' },
              { id: 'subject', label: '主题', placeholder: '请输入咨询主题', required: true },
              { id: 'message', label: '留言', placeholder: '请输入您的留言内容', required: true, type: 'textarea' }
            ],
            contactInfoItems: [
              { icon: 'fas fa-map-marker-alt', label: '地址', value: '北京市海淀区中关村科技园区', link: 'https://maps.google.com' },
              { icon: 'fas fa-phone', label: '电话', value: '+86 10 8888 8888', link: 'tel:+861088888888' },
              { icon: 'fas fa-envelope', label: '邮箱', value: 'contact@example.com', link: 'mailto:contact@example.com' },
              { icon: 'fas fa-clock', label: '工作时间', value: '周一至周五 9:00-18:00', link: '' }
            ],
            socialLinksConfig: {
              show: true,
              title: '关注我们',
              description: '在社交媒体上关注我们获取最新动态',
              links: [
                { id: 'twitter', icon: 'fab fa-twitter', title: 'Twitter', link: 'https://twitter.com' },
                { id: 'facebook', icon: 'fab fa-facebook-f', title: 'Facebook', link: 'https://facebook.com' },
                { id: 'instagram', icon: 'fab fa-instagram', title: 'Instagram', link: 'https://instagram.com' },
                { id: 'linkedin', icon: 'fab fa-linkedin-in', title: 'LinkedIn', link: 'https://linkedin.com' }
              ]
            },
            subscribeConfig: {
              show: true,
              title: '订阅最新资讯',
              description: '订阅我们的邮件列表，获取最新产品更新和活动信息',
              placeholder: '您的邮箱地址',
              buttonText: '立即订阅',
              endpoint: '/api/subscribe'
            }
          };
          
          // 更新数据
          if (mockResponse.formFields) {
            this.$set(this, 'formFields', mockResponse.formFields);
          }
          if (mockResponse.contactInfoItems) {
            this.$set(this, 'contactInfoItems', mockResponse.contactInfoItems);
          }
          if (mockResponse.socialLinksConfig) {
            this.$set(this, 'socialLinksConfig', mockResponse.socialLinksConfig);
          }
          if (mockResponse.subscribeConfig) {
            this.$set(this, 'subscribeConfig', mockResponse.subscribeConfig);
          }
          
        } else if (this.dataSourceType === 'custom') {
          // 触发自定义数据源事件，由父组件提供数据
          this.$emit('customDataRequest');
        }
        
        // 触发数据加载成功事件
        this.$emit('dataLoaded', {
          sourceType: this.dataSourceType,
          data: {
            formFields: this.formFields,
            contactInfoItems: this.contactInfoItems,
            socialLinksConfig: this.socialLinksConfig,
            subscribeConfig: this.subscribeConfig
          }
        });
        
      } catch (error) {
        console.error('Failed to load data from source:', error);
        
        // 触发数据加载失败事件
        this.$emit('dataLoadError', {
          error: error.message || '数据加载失败',
          sourceType: this.dataSourceType
        });
        
        // 恢复原始数据
        this.restoreOriginalData();
        
      } finally {
        this.isLoading = false;
      }
    },
    
    /**
     * 刷新数据
     */
    refresh() {
      this.loadDataFromSource();
    },
    
    /**
     * 恢复原始数据
     */
    restoreOriginalData() {
      if (this.originalFormFields) {
        this.$set(this, 'formFields', JSON.parse(JSON.stringify(this.originalFormFields)));
      }
      if (this.originalContactInfoItems) {
        this.$set(this, 'contactInfoItems', JSON.parse(JSON.stringify(this.originalContactInfoItems)));
      }
      if (this.originalSocialLinks) {
        this.$set(this, 'socialLinksConfig', JSON.parse(JSON.stringify(this.originalSocialLinks)));
      }
      if (this.originalSubscribeConfig) {
        this.$set(this, 'subscribeConfig', JSON.parse(JSON.stringify(this.originalSubscribeConfig)));
      }
    },
    
    /**
     * 验证URL是否有效
     */
    isValidUrl(url) {
      try {
        new URL(url);
        return true;
      } catch (e) {
        return false;
      }
    },
    
    /**
     * 获取背景样式
     */
    getBackgroundStyles() {
      const styles = {};
      
      if (this.backgroundType === 'solid') {
        styles.backgroundColor = this.bgColor;
      } else {
        // 渐变色背景
        styles.background = `linear-gradient(to bottom right, ${this.bgColor}80, ${this.bgColor2}90)`;
      }
      
      return styles;
    },
    
    /**
     * 获取输入框样式类
     */
    getInputClasses() {
      return {
        'border-gray-300': true,
        'focus:ring-primary/50': true,
        [`focus:border-${this.primaryColor.replace('#', '')}`]: true
      };
    },
    
    /**
     * 获取提交按钮样式
     */
    getSubmitButtonStyles() {
      return {
        backgroundColor: this.primaryColor,
        color: '#ffffff',
        '--hover-bg': this.getColorWithOpacity(this.primaryColor, 0.9)
      };
    },
    
    /**
     * 获取订阅按钮样式
     */
    getSubscribeButtonStyles() {
      return {
        backgroundColor: this.primaryColor,
        color: '#ffffff',
        '--hover-bg': this.getColorWithOpacity(this.primaryColor, 0.9)
      };
    },
    
    /**
     * 处理表单提交
     */
    handleSubmit() {
      // 触发表单提交事件
      this.$emit('formSubmit', {
        data: { ...this.formData },
        timestamp: new Date().getTime()
      });
      
      this.isSubmitting = true;
      
      // 模拟API请求
      if (this.formEndpoint) {
        // 实际项目中应使用axios等库发送请求
        setTimeout(() => {
          try {
            // 模拟成功响应
            const mockResponse = { success: true, message: '表单提交成功' };
            this.$emit('formSuccess', {
              response: mockResponse,
              data: { ...this.formData }
            });
            
            // 重置表单
            this.resetForm();
          } catch (error) {
            this.$emit('formError', {
              error,
              data: { ...this.formData }
            });
          } finally {
            this.isSubmitting = false;
          }
        }, 1500);
      } else {
        // 如果没有配置接口，直接触发成功事件
        this.$emit('formSuccess', {
          response: { success: true, message: '表单提交成功（模拟）' },
          data: { ...this.formData }
        });
        this.resetForm();
        this.isSubmitting = false;
      }
    },
    
    /**
     * 处理社交媒体链接点击
     */
    handleSocialLinkClick(social) {
      this.$emit('socialLinkClick', {
        social
      });
      
      // 执行跳转
      if (social.link) {
        window.open(social.link, '_blank');
      }
    },
    
    /**
     * 处理联系信息中的链接点击
     */
    handleContactLinkClick(link, type) {
      this.$emit('contactLinkClick', {
        link,
        type
      });
      
      // 执行跳转
      if (link.startsWith('tel:')) {
        window.location.href = link;
      } else if (link.startsWith('mailto:')) {
        window.location.href = link;
      } else if (link) {
        window.open(link, '_blank');
      }
    },
    
    /**
     * 处理订阅提交
     */
    handleSubscribe() {
      if (!this.subscriptionEmail) return;
      
      this.$emit('subscribe', {
        email: this.subscriptionEmail
      });
      
      this.isSubscribing = true;
      
      // 模拟API请求
      if (this.subscribeEndpoint) {
        setTimeout(() => {
          try {
            // 模拟成功响应
            const mockResponse = { success: true, message: '订阅成功' };
            this.$emit('subscribeSuccess', {
              response: mockResponse,
              email: this.subscriptionEmail
            });
            
            // 清空输入
            this.subscriptionEmail = '';
          } catch (error) {
            this.$emit('subscribeError', {
              error,
              email: this.subscriptionEmail
            });
          } finally {
            this.isSubscribing = false;
          }
        }, 1000);
      } else {
        // 如果没有配置接口，直接触发成功事件
        this.$emit('subscribeSuccess', {
          response: { success: true, message: '订阅成功（模拟）' },
          email: this.subscriptionEmail
        });
        this.subscriptionEmail = '';
        this.isSubscribing = false;
      }
    },
    
    /**
     * 重置表单
     */
    resetForm() {
      this.formData = {
        name: '',
        email: '',
        company: '',
        subject: '',
        message: ''
      };
    },
    
    /**
     * 设置表单数据
     */
    setFormData(data) {
      if (typeof data === 'object' && data !== null) {
        this.formData = {
          ...this.formData,
          ...data
        };
      }
    },
    
    /**
     * 手动提交表单
     */
    submitForm() {
      // 触发表单提交
      const formElement = this.$el.querySelector('form');
      if (formElement && formElement.checkValidity()) {
        this.handleSubmit();
      } else if (formElement) {
        // 触发验证提示
        formElement.reportValidity();
      }
    },
    
    /**
     * 设置订阅邮箱
     */
    setSubscriptionEmail(email) {
      this.subscriptionEmail = email;
    },
    
    /**
     * 辅助方法：获取带透明度的颜色
     */
    getColorWithOpacity(color, opacity) {
      if (color.startsWith('#') && color.length === 7) {
        const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0');
        return `${color}${alpha}`;
      }
      return color;
    }
  }
};
</script>

<style scoped>
/* 已替换为Tailwind CSS样式 */
</style>
    